<template>
  <div>
    <!-- <div class="app-main-title">订场订单明细</div> -->
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    >
      <template #btns>
        <el-button
          :loading="exportLoading"
          type="primary"
          @click="batchexport"
          >{{ translate("export") }}</el-button
        >
      </template>
    </QueryForm>
    <div v-if="tjList && tjList.length > 0" class="total_wrap">
      <div class="first item">
        <div class="key">{{ translate("shanxuan") }}</div>
        <div class="value">{{ translate("heji") }}</div>
      </div>
      <div class="item_list">
        <div v-for="(item, i) in tjList" :key="i" class="item">
          <div class="key">{{ item.payMethod }}</div>
          <div class="value">
            <!-- <span>{{translate("renminbi")}}</span> -->
            <span class="price">{{ item.money }}</span>
          </div>
        </div>
      </div>
      <el-tooltip effect="dark" placement="left">
        <div class="jesm">
          <img
            style="width: 15px; marginright: 2px"
            src="@/assets/icon/question.png"
            alt=""
          />{{ translate("jesm") }}
        </div>
        <div slot="content" v-html="smTip" />
      </el-tooltip>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="translate('venue')"
        prop="venueName"
        width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('orderId')"
        prop="orderId"
        width="220"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('ddxq')"
        prop="orderInfo"
        min-width="260"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('ddzsc')"
        prop="orderAllTime"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="translate('yjzj')"
        prop="allPrice"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="translate('zhzj')"
        prop="realPrice"
        min-width="80"
      >
        <template slot-scope="scope">
          {{
            scope.row.realPrice || String(scope.row.realPrice) == "0"
              ? scope.row.realPrice
              : scope.row.allPrice
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('orderSource')"
        prop="channelType"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.channelTypeName }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('payMethod')"
        prop="payMethed"
        min-width="120"
      >
        <template slot-scope="scope">
          {{ nameWithPayMethod(scope.row.payMethed) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('ydr')"
        min-width="180"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.userType == "0"
              ? scope.row.memberName + " " + scope.row.memberPhone
              : scope.row.userName + " " + scope.row.userPhone
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="总销售额" min-width="100" prop="" show-overflow-tooltip />
      <el-table-column align="center" label="会员售卖额" min-width="100" prop="" show-overflow-tooltip />
      <el-table-column align="center" label="非会员售卖额" min-width="100" prop="" show-overflow-tooltip /> -->
      <el-table-column
        align="center"
        :label="translate('bz')"
        min-width="140"
        prop="remarks"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('operator')"
        min-width="100"
        prop="creatorName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('createTime')"
        min-width="160"
        prop="createTime"
      />
      <el-table-column
        :label="translate('payStauts')"
        prop="sort"
        min-width="120"
        align="center"
        fixed="right"
        ><template slot-scope="scope">
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="pagination.page"
        hide-on-single-page
        @current-change="getList"
      />
    </div> -->
    <Pagination
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { channelConfigPost, allConfigList, siteOrderListPc, venueList, SiteOrderListPcExcel } from '@/api'
import Pagination from '@/components/paginations'
import { queryFormConfig } from './config'
import dayjs from 'dayjs'
export default {
  name: 'FieldStatisticsDetail',
  components: {
    Pagination
  },
  data() {
    return {
      queryFormConfig,
      authCode: '',
      exportLoading: false,
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      allPayMethedList: [],
      filters: {},
      listLoading: false,
      venueList: [],
      tjList: [],
      smTip: ''
    }
  },
  created() {
    let time = []
    const start = new Date()
    const end = new Date()
    start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
    time = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
    this.$set(this.filters, 'time', time)
    this.getVenueList()
    this.pdgj()
    this.getChannel()
  },
  methods: {
    getChannel() {
      channelConfigPost({ param: { code: 'CHANNEL_CARD' } }).then(res => {
        this.queryFormConfig.formItems[4].options = res.recordList || []
      })
    },
    getVenueList() {
      venueList({
        param: { flag: '0' }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.venueList = res.recordList
          const arr = res.recordList
          this.queryFormConfig.formItems[0].options = arr
          // this.$set(this.filters, 'venueId', res.recordList[0].id)
          this.getList(1)
        })
        .catch(() => { })
    },
    nameWithPayMethod(payM) {
      const temp = this.allPayMethedList.find((item) => item.value === payM)
      return temp ? temp.name : '-'
    },
    pdgj() {
      // sessionStorage.setItem('venueId', this.filters.venueId)
      allConfigList({ param: { type: '2', code: '1' } }).then(res => {
        this.allPayMethedList = res.recordList || []
        const arr = res.recordList
        this.queryFormConfig.formItems[5].options = arr
      }).catch(err => {
        console.log(err)
      })
    },
    clearList() {
      this.filters = {
        venueId: this.filters.venueId
      }
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList(page) {
      if (this.filters.venueId) {
        sessionStorage.setItem('venueId', this.filters.venueId)
      }
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (filters.time && filters.time.length > 0) {
        filters.startDate = filters.time[0] + ' 00:00:00'
        filters.endDate = filters.time[1] + ' 23:59:59'
      } else {
        filters.startDate = parseTime(new Date()).slice(0, 10) + ' 00:00:00'
        filters.endDate = parseTime(new Date()).slice(0, 10) + ' 23:59:59'
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      siteOrderListPc({ pagination, param: { ...filters, statistics: true } }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
          const tjList = res.data
          if (tjList) {
            let smTip = ''
            tjList.forEach(s => {
              smTip = smTip + s.tip + '<br />'
            })
            this.tjList = tjList
            this.smTip = smTip
          }
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    batchexport() {
      sessionStorage.setItem('venueId', this.filters.venueId || '')
      const { filters } = this
      const venueId = sessionStorage.getItem('venueId')
      this.exportLoading = true
      SiteOrderListPcExcel({ param: { venueId, ...filters } }).then(res => {
        this.exportLoading = false
        if (res.errorCode === '000000') {
          window.open(res.record.showUrl, '_blank')
        }
      }).catch(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-payment {
  .payment-top {
    background: #e8ebf7;
    padding: 20px 20px;
    margin-left: -20px;
    margin-top: -10px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: content-box;
    > div {
      font-size: 13px;
      line-height: 1.5;
      &:first-of-type {
        font-size: 18px;
        font-weight: bold;
      }
      span {
        color: #dd0707;
      }
      &.yh {
        display: flex;
        div {
          margin-right: 20px;
        }
      }
    }
  }
  .title {
    font-size: 16px;
    font-weight: bolder;
    color: #222222;
    line-height: 2;
    margin-bottom: 15px;
    span {
      float: right;
      font-size: 14px;
      font-weight: normal;
      color: #333333;
    }
    .gaijia {
      color: #1943a9;
      border: 1px solid #1943a9;
      width: 100px;
      line-height: 28px;
      cursor: pointer;
      height: 30px;
      border-radius: 15px;
      font-weight: normal;
      font-size: 14px;
      text-align: center;
      float: right;
    }
  }
  .payment-content {
    justify-content: space-between;
    .content {
      display: flex;
      padding: 20px;
      margin-bottom: 12px;
      box-sizing: border-box;
      background: #f4f7fc;
      border-radius: 4px;
      line-height: 1.5;
      div {
        width: 30%;
        &.delete {
          cursor: pointer;
          text-align: center;
        }
      }
      span {
        color: #1943a9;
      }
    }
  }
  .payment-money {
    font-size: 13px;
    margin-bottom: 30px;
    display: flex;
    div {
      margin-right: 20px;
    }
    span {
      font-size: 20px;
      font-weight: bolder;
      color: #dd0707;
      vertical-align: middle;
    }
  }
  .payment-label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .label {
      width: 80px;
      font-size: 14px;
      font-weight: 500;
    }
    .el-input {
      flex: 1;
    }
  }
  .payment-type {
    span {
      padding: 0 10px;
      height: 38px;
      border-radius: 2px;
      border: 1px solid #435ebe;
      color: #1943a9;
      text-align: center;
      cursor: pointer;
      margin-bottom: 30px;
      margin-right: 12px;
      display: inline-block;
      line-height: 38px;
      font-size: 14px;
      &.on {
        background-color: #435ebe;
        color: #fff;
      }
    }
  }
}

.member {
  background-color: rgba(67, 94, 190, 0.1);
  padding: 20px;
  .cont {
    display: flex;
    div {
      margin-right: 20px;
      font-size: 16px;
      line-height: 1.5;
      &.lx {
        border: 1px #999 solid;
        border-radius: 4px;
        background-color: #fff;
        padding: 0 20px;
      }
      span {
        color: rgb(170, 170, 170);
      }
    }
  }
}
.han1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  overflow: hidden;
}
</style>
